<template>
  <div class="basic-collapse-outer" ref="fatherNode">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, onMounted, ref} from "vue";

export default defineComponent({
  name:'basic-collapse',
  props:{
    selectionIndex:Number
  },
  emits:[
      'log'
  ],
  setup(props,context) {

    const fatherNode=ref<any>(null);

    const childrenNode=ref<any>([]);

    const selectionIndex=computed(()=>props.selectionIndex)

    onMounted(()=>{
      let i=0;
      while ( i < fatherNode.value.children.length) {
        if(fatherNode.value.children[i].classList.contains('basic-collapse-item-outer')){
          childrenNode.value.push(fatherNode.value.children[i]);
          i++;
        }else {
          fatherNode.value.children[i].remove();
        }
      }
      console.log(childrenNode)
    })

    const log=(info:string)=>{

      console.log(info)
    }

    return {
      fatherNode,
      log
    }
  }
})
</script>

<style lang="less" scoped>
.basic-collapse-outer{
  padding: 8px 16px 8px 16px;
}
.basic-collapse-outer{

}
</style>
